<template>
  <div>
    <div class="about_bg">
      <catdh class="about_cat"></catdh>

      <div class="about_tit">
        <autotext></autotext>
     </div>
     <div class="about_top">
        <div class="about_er">
            <!-- <el-radio-group v-model="size">
    <el-radio label="">默认</el-radio>
    <el-radio label="medium">中等</el-radio>
    <el-radio label="small">小型</el-radio>
    <el-radio label="mini">超小</el-radio>
  </el-radio-group> -->

  <el-descriptions class="margin-top" title="Little Black" :column="2" :size="size" border>
    <template slot="extra">
      <el-button type="primary" size="small" 
        v-clipboard:copy="tel"
        v-clipboard:success="firstCopySuccess"
        v-clipboard:error="firstCopyError" >复制手机号</el-button>
    </template>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-user"></i>
        用户名
      </template>
      陶世林
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-mobile-phone"></i>
        手机号
      </template>
      {{tel}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        居住地
      </template>
      上海市
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-tickets"></i>
        职位
      </template>
      <el-tag size="small">web前端开发</el-tag>
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
        技术栈
      </template>
      vue、vue-router、element、vant、axios
    </el-descriptions-item>
  </el-descriptions>

  <el-descriptions class="margin-top vp" title="Don't be afraid of the dark" :column="2" :size="size">
    <template slot="extra">
      <el-button type="primary" size="small"
       v-clipboard:copy="emel"
        v-clipboard:success="firstCopySuccess"
        v-clipboard:error="firstCopyError"
      >复制邮箱号</el-button>
    </template>
    <el-descriptions-item label="邮箱">{{emel}}</el-descriptions-item>
    <el-descriptions-item label="期望薪资">12k+</el-descriptions-item>
 
    <el-descriptions-item label="职业技能" labelStyle="    padding-top: 12px;" contentStyle="  padding-top: 12px;">
      1、熟悉使用 vue全家桶对项目进行优化、为维护、开发。
2、熟悉使用vueX、Ajax、localStorage等数据存储、数据请求
3、熟悉使用ui框架：vant-ui、bootstrap、element-ui等对页面交互效果进行优化
4、熟练使用js、jQuery，对面对对象有一定的认知和了解
5、熟悉使用npm，对常用插件有一定的了解
    </el-descriptions-item>
    
  </el-descriptions>
   <el-descriptions>
    <el-descriptions-item label="个人评价" labelStyle="    padding-top: 12px;" contentStyle="  padding-top: 12px;">
     本人能快速适应工作环境，对工作认真细心，喜欢钻研问题，解决问题。具有危机意识，习惯做到万事俱备。为人诚恳，踏实肯干。能自主学习工作相关知识和技术，具有优秀的团队精神、协调能力。习惯总结所学知识，拥有比较良好的自律。 
    </el-descriptions-item> 
   </el-descriptions>
        </div>
     </div>
    </div>
    
  </div>
</template>

<script>
 import catdh from '../components/catdh.vue'    
 import autotext from '../components/autotext.vue'    
  export default {
    data() {
      return {
         size: '',
         tel:'15639509681',   
         emel:'2498686798@qq.com',
    

      };
    },
      components: {
     catdh,
     autotext
    },
   
   
    created() {
       if(this._isMobile()){
        this.$router.push('/main') 
      }else{
            
      }
    },
    mounted() {
      

    },
    

    methods:{
           _isMobile() {
	 let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
	 return flag;
},
 firstCopySuccess(e) {
    
       this.$message({
          message: '复制成功！',
          type: 'success'
        });
    },
    firstCopyError(e) {
     
      this.$message.error('复制失败！');
    }

    },
    
  
    
  };
</script>

<style scoped="scoped">
.about_bg{
  width: calc(100vw - 150px);
  height: 100vh;
  /* background: #000; */
  position: relative;
  overflow: hidden;
}
.about_cat{
  width: 250px;
  height: 250px;
  position: absolute;
  bottom: 0px;
  right: 250px;
  z-index: 999;
}
.about_tit{
  width: 100%;
  height: 100px; 
  position:absolute;
  left: 0px;
  top: 0px;
  z-index: 8;
}
.about_top{
  width: 100%;
  height: calc(100vh - 200px);
  /* border: 1px solid #000; */
  /* background: aquamarine; */
   position:absolute;
  left: 0px;
  top: 0px;
  z-index: 999999;
}
.about_er{
  width: 70%;
  margin: auto;
  height: 80%;
  /* background: #000; */
  margin-top:10vh;
}
.vp {
  margin-top:60px ;
}


</style>
<style >

</style>